import React, {useEffect, useRef, useState} from 'react';

// 函数组件示例
export function TestReactLifecycleFunction() {
    const [count, setCount] = useState(0);
    const [text, setText] = useState('Hello');
    const prevCountRef = useRef(-1);

    console.log('函数组件: render');

    // 相当于 componentDidMount 和 componentDidUpdate
    useEffect(() => {
        console.log('函数组件: useEffect - 无依赖数组，每次渲染后都执行');
        return () => {
            console.log('函数组件: useEffect 清理函数 - 相当于 componentWillUnmount');
        };
    });

    // 相当于 componentDidMount
    useEffect(() => {
        console.log('函数组件: useEffect - 空依赖数组，仅在挂载时执行');
        return () => {
            console.log('函数组件: useEffect 清理函数 - 卸载时执行');
        };
    }, []);

    // 依赖 count 的 effect
    useEffect(() => {
        console.log(`函数组件: useEffect - count 变化时执行，当前 count: ${count}`);
        prevCountRef.current = count;
    }, [count]);

    const prevCount = prevCountRef.current;

    return (
        <div style={{border: '1px solid blue', padding: '10px', margin: '10px'}}>
            <h2>函数组件 (使用 Hooks)</h2>
            <p>Count: {count}</p>
            {prevCount !== undefined && <p>上一个 Count: {prevCount}</p>}
            <button onClick={() => setCount(c => c + 1)}>增加 Count</button>

            <p>Text: {text}</p>
            <input
                value={text}
                onChange={(e) => setText(e.target.value)}
            />
        </div>
    );
}
